Day5 Android - Layout版面(下)

13th鐵人賽

chu_jin02

團隊Nutc_imac_happier

2021-09-20 12:52:02

2301 瀏覽

分享至

繼昨天講了的ConstraintLayout，今天要來介紹自己也常用的另外兩個布局，LinearLayout以及RelativeLayout，首先從LinearLayout先開始。

LinearLayout

LinearLayout(線性布局)，嚴格來說又可分成兩種布局方向，一種是水平方向的(vertical)以及垂直方向的(horizontal)，首先先附上程式：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="horizontal">

    <TextView
        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Hello World!"
        android:layout_marginTop="100dp"
        android:layout_marginLeft="100dp"
        android:padding="20dp"/>

</LinearLayout>

在最外層的layout，可以看到他的布局方向(orientation)是垂直方向(horizontal)，若orientation這個屬性改成vertical則是水平方向的，接著先來講一些常用到的屬性。

常用屬性

其中裡面也蠻多通用於其他布局的屬性，主要有：

android:id > 可用來辨識元件的標籤id。(="@+id/????")，?的部分可以用來設定你這個元件的id，自定的。
android:layout_width及height則分別是他的寬、高。(="wrap_content":依照內容物件的大小去更動寬或高，="match_parent":填滿上層元件的寬或高)
android:layout_weight > 權重，值越小則比例越小，比例為1(="1")，如果現在有兩個元件的寬要七三分，就是一個設(="0.7")、一個設(="0.3")，大約是這樣。

(元件內外部距離)

android:padding > 元件內邊的距離(="20dp"則內邊界為20dp的距離)。
android:layout_margin > 元件外邊的距離。(="20dp"則外邊界的距離為20dp)

(元素位置控制)

android:gravity="" > 可用於控制元件裡面元素的方向(文字等，如center、left、center|vertical等)。
android:layout_gravity="" > 可用於控制元件在父層裡的位置(center、center|vertical...等)。
android:paddingTop > 此元件內容物件與元件頂邊界拉開的距離(="20dp"則拉開20dp的距離)
android:paddingBottom > 此元件與元件底邊界拉開的距離(="20dp"則拉開20dp的距離)
android:paddingLeft > 此元件內容物件與元件左邊界拉開的距離(="20dp"則拉開20dp的距離)
android:paddingRight > 此元件內容物件與元件右邊界拉開的距離(="20dp"則拉開20dp的距離)
android:layout_marginTop > 此元件與父層頂邊界拉開的距離(="20dp"則拉開20dp的距離)
android:layout_marginBottom > 此元件與父層底邊界拉開的距離(="20dp"則拉開20dp的距離)
android:layout_marginLeft > 此元件與父層左邊界拉開的距離(="20dp"則拉開20dp的距離)
android:layout_marginRight > 此元件與父層右邊界拉開的距離(="20dp"則拉開20dp的距離)
更多屬性請參閱：Android Developers/LinearLayout

RelativeLayout

RelativeLayout(相對布局)，主要可透過相對位置(相對布局、元件)來調整、設定其元件的位置。

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentStart="true"
        android:layout_alignParentTop="true"
        android:layout_marginStart="100dp"
        android:layout_marginTop="100dp"
        android:text="Hello World!"
        android:padding="50dp"/>

</RelativeLayout>